<template>
  <div class="header">
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
    >
      <el-form-item label="标题">
        <el-input v-model="formInline.title" placeholder="标题"/>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="formInline.type" placeholder="类型">
          <el-option label="" value=""/>
          <el-option label="原创" :value="0"/>
          <el-option label="转载" :value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="formInline.status" placeholder="审核状态">
          <el-option label="" value=""/>
          <el-option label="未审核" :value="0"/>
          <el-option label="审核通过" :value="1"/>
          <el-option label="未通过" :value="-1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="过去时间">
        <el-select v-model="formInline.pastDay" placeholder="过去时间">
          <el-option label="过去7天" :value="7"/>
          <el-option label="过去一个月" :value="30"/>
          <el-option label="过去一年" :value="365"/>
          <el-option label="过去十年" :value="365*10"/>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  <div style="margin-left: 25px;margin-bottom: 20px">
    <el-button
        :icon="Search"
        type="primary"
        @click="queryPageArticleList"
    >
      搜索
    </el-button>
    <el-button
        :icon="Delete"
        type="warning"
        @click="clearFormLine"
    >
      清空
    </el-button>
  </div>
  <el-dialog v-model="contentDialog" title="文章详情" width="30%" center>
    <el-input v-model="articleContent" disabled rows="15" type="textarea"/>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="updateArticleStatus(-1)">审核失败</el-button>
        <el-button type="success" @click="updateArticleStatus(1)">
          审核成功
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="tableData" border stripe height="455">
    <el-table-column prop="title" label="标题" width="210" />
    <el-table-column prop="description" label="简介" width="150"/>
    <el-table-column prop="coverImage" label="封面图片" width="100">
      <template #default="scope">
        <img :src="scope.row.coverImage" width="80" height="80"/>
      </template>
    </el-table-column>
    <el-table-column prop="content" label="查看详情" width="130">
      <template #default="scope">
        <el-button type="primary" style="font-size: 10px" @click="viewContentDetail(scope.row.content,scope.row.id)">查看内容详情</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="type" label="文章类型" width="100">
      <template #default="scope">
        <el-tag v-if="scope.row.type === 0" type="success" effect="dark">原创</el-tag>
        <el-tag v-else type="warning" effect="dark">转载</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="文章状态" width="100">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 0" effect="dark">未审核</el-tag>
        <el-tag v-else-if="scope.row.status === 1" type="success" effect="dark">审核通过</el-tag>
        <el-tag v-else type="danger" effect="dark">审核未通过</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="180"/>
  </el-table>
  <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15,20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px"
  />
</template>

<script setup>
import {ref} from 'vue'
import {Search,Delete} from '@element-plus/icons-vue'
import request from "../utils/request";
import {ElMessage} from "element-plus";

const pageNum = ref(1)
const pageSize = ref(10)
const pageTotal = ref(0)
const tableData = ref([])
const formInline = ref({
  title: '',
  type:'',
  status:'',
  pastDay: 365 * 10,
  pageParam: {
    pageNum:pageNum.value,
    pageSize:pageSize.value
  }
})
const originForm = {
  title: '',
  type:'',
  status:'',
  pastDay: 365 * 10,
  pageParam: {
    pageNum:pageNum.value,
    pageSize:pageSize.value
  }
}
const contentDialog = ref(false)
const articleContent = ref('')
const tempArticle = ref({
  id:0,
  status:0
})

// 修改审核状态
const updateArticleStatus = (status) => {
  tempArticle.value.status = status
  console.log(tempArticle.value)
  request.put('/contents/articles/manage/status',tempArticle.value).then(res => {
    if (res.code === 1){
      ElMessage.success(res.data)
      queryPageArticleList()
    }else {
      ElMessage.error(res.message)
    }
    contentDialog.value = false
  })
}

// 查看内容详情
const viewContentDetail = (content,id) => {
  tempArticle.value.id = id
  articleContent.value = content
  contentDialog.value = true
}

//改变页码
const handleSizeChange = (val) => {
  formInline.value.pageParam.pageSize = val
  queryPageArticleList()
}
//改变当前页
const handleCurrentChange = (val) => {
  formInline.value.pageParam.pageNum = val
  console.log()
  queryPageArticleList()
}

//清空表单
const clearFormLine = () => {
  formInline.value = originForm
}
//查询文章列表
const queryPageArticleList = () => {
  request.post('/contents/articles/manage/page',formInline.value).then(res => {
    if (res.code === 1){
      tableData.value = res.data.records
      pageNum.value = res.data.current
      pageSize.value = res.data.size
      pageTotal.value = res.data.total
    }
  })
}
queryPageArticleList()

</script>

<style scoped>
.el-dialog .el-input {
  width: 218px;

}

.demo-form-inline {
  margin-left: 25px;
}

.header {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
}
</style>
